<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>好学APP - 个人资料</title>
    <link rel="stylesheet" href="css/styles.css">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="ios-device">
        <!-- iOS 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <span class="status-bar-signal"><i class="fas fa-signal"></i></span>
                <span class="status-bar-wifi"><i class="fas fa-wifi"></i></span>
                <span class="status-bar-battery"><i class="fas fa-battery-full"></i></span>
            </div>
        </div>
        
        <!-- 应用内容区域 -->
        <div class="app-content">
            <!-- 个人资料头部 -->
            <div class="profile-header">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="用户头像" class="profile-avatar">
                <h1 class="profile-name">小明</h1>
                <p class="profile-bio">热爱学习，喜欢用费曼学习法掌握新知识</p>
                
                <button class="btn btn-outline">
                    <i class="fas fa-edit mr-2"></i>编辑资料
                </button>
                
                <div class="profile-stats">
                    <div class="profile-stat">
                        <div class="profile-stat-value">42</div>
                        <div class="profile-stat-label">已学主题</div>
                    </div>
                    <div class="profile-stat">
                        <div class="profile-stat-value">18</div>
                        <div class="profile-stat-label">笔记数量</div>
                    </div>
                    <div class="profile-stat">
                        <div class="profile-stat-value">7</div>
                        <div class="profile-stat-label">连续天数</div>
                    </div>
                </div>
            </div>
            
            <!-- 学习成就 -->
            <div class="p-3">
                <h2 class="font-bold mb-3">学习成就</h2>
                
                <div class="flex flex-wrap justify-between">
                    <div style="width: 30%; text-align: center; margin-bottom: 16px;">
                        <div style="width: 64px; height: 64px; border-radius: 50%; background-color: var(--primary-color); display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                            <i class="fas fa-award" style="color: white; font-size: 28px;"></i>
                        </div>
                        <p class="mt-2 font-medium">学习达人</p>
                    </div>
                    
                    <div style="width: 30%; text-align: center; margin-bottom: 16px;">
                        <div style="width: 64px; height: 64px; border-radius: 50%; background-color: var(--secondary-color); display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                            <i class="fas fa-fire" style="color: white; font-size: 28px;"></i>
                        </div>
                        <p class="mt-2 font-medium">连续7天</p>
                    </div>
                    
                    <div style="width: 30%; text-align: center; margin-bottom: 16px;">
                        <div style="width: 64px; height: 64px; border-radius: 50%; background-color: var(--accent-color); display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                            <i class="fas fa-book" style="color: white; font-size: 28px;"></i>
                        </div>
                        <p class="mt-2 font-medium">知识探索者</p>
                    </div>
                    
                    <div style="width: 30%; text-align: center; margin-bottom: 16px;">
                        <div style="width: 64px; height: 64px; border-radius: 50%; background-color: var(--success-color); display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                            <i class="fas fa-pencil-alt" style="color: white; font-size: 28px;"></i>
                        </div>
                        <p class="mt-2 font-medium">笔记达人</p>
                    </div>
                    
                    <div style="width: 30%; text-align: center; margin-bottom: 16px;">
                        <div style="width: 64px; height: 64px; border-radius: 50%; background-color: var(--warning-color); display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                            <i class="fas fa-share-alt" style="color: white; font-size: 28px;"></i>
                        </div>
                        <p class="mt-2 font-medium">知识分享者</p>
                    </div>
                    
                    <div style="width: 30%; text-align: center; margin-bottom: 16px;">
                        <div style="width: 64px; height: 64px; border-radius: 50%; background-color: var(--border-color); display: flex; align-items: center; justify-content: center; margin: 0 auto;">
                            <i class="fas fa-lock" style="color: var(--text-secondary); font-size: 28px;"></i>
                        </div>
                        <p class="mt-2 font-medium text-secondary">待解锁</p>
                    </div>
                </div>
            </div>
            
            <!-- 学习统计 -->
            <div class="p-3">
                <h2 class="font-bold mb-3">学习统计</h2>
                
                <div class="card">
                    <h3 class="font-bold mb-2">学习时长（本周）</h3>
                    <div style="height: 150px; display: flex; align-items: flex-end; justify-content: space-between;">
                        <div style="width: 12%; text-align: center;">
                            <div style="height: 40px; background-color: var(--primary-color); border-radius: 4px;"></div>
                            <p class="mt-1 text-sm">一</p>
                        </div>
                        <div style="width: 12%; text-align: center;">
                            <div style="height: 80px; background-color: var(--primary-color); border-radius: 4px;"></div>
                            <p class="mt-1 text-sm">二</p>
                        </div>
                        <div style="width: 12%; text-align: center;">
                            <div style="height: 60px; background-color: var(--primary-color); border-radius: 4px;"></div>
                            <p class="mt-1 text-sm">三</p>
                        </div>
                        <div style="width: 12%; text-align: center;">
                            <div style="height: 100px; background-color: var(--primary-color); border-radius: 4px;"></div>
                            <p class="mt-1 text-sm">四</p>
                        </div>
                        <div style="width: 12%; text-align: center;">
                            <div style="height: 120px; background-color: var(--primary-color); border-radius: 4px;"></div>
                            <p class="mt-1 text-sm">五</p>
                        </div>
                        <div style="width: 12%; text-align: center;">
                            <div style="height: 70px; background-color: var(--primary-color); border-radius: 4px;"></div>
                            <p class="mt-1 text-sm">六</p>
                        </div>
                        <div style="width: 12%; text-align: center;">
                            <div style="height: 90px; background-color: var(--primary-color); border-radius: 4px;"></div>
                            <p class="mt-1 text-sm">日</p>
                        </div>
                    </div>
                    <div class="flex justify-between mt-3">
                        <span class="text-secondary">总计：9小时20分钟</span>
                        <span class="text-primary">+15% 较上周</span>
                    </div>
                </div>
            </div>
            
            <!-- 最近学习 -->
            <div class="p-3">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="font-bold">最近学习</h2>
                    <a href="#" class="text-primary">查看全部</a>
                </div>
                
                <div class="list">
                    <div class="list-item">
                        <div class="list-item-content">
                            <div class="list-item-title">量子力学基础</div>
                            <div class="list-item-subtitle">物理 · 今天</div>
                        </div>
                        <div class="list-item-right">
                            <span class="badge badge-success">75%</span>
                        </div>
                    </div>
                    
                    <div class="list-item">
                        <div class="list-item-content">
                            <div class="list-item-title">微积分入门</div>
                            <div class="list-item-subtitle">数学 · 昨天</div>
                        </div>
                        <div class="list-item-right">
                            <span class="badge badge-success">100%</span>
                        </div>
                    </div>
                    
                    <div class="list-item">
                        <div class="list-item-content">
                            <div class="list-item-title">有机化学基础</div>
                            <div class="list-item-subtitle">化学 · 3天前</div>
                        </div>
                        <div class="list-item-right">
                            <span class="badge badge-warning">45%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-item" id="tab-home">
                <div class="tab-icon"><i class="fas fa-home"></i></div>
                <div class="tab-label">首页</div>
            </div>
            <div class="tab-item" id="tab-learn">
                <div class="tab-icon"><i class="fas fa-book-open"></i></div>
                <div class="tab-label">学习</div>
            </div>
            <div class="tab-item" id="tab-note">
                <div class="tab-icon"><i class="fas fa-edit"></i></div>
                <div class="tab-label">笔记</div>
            </div>
            <div class="tab-item active" id="tab-profile">
                <div class="tab-icon"><i class="fas fa-user"></i></div>
                <div class="tab-label">我的</div>
            </div>
            <div class="tab-item" id="tab-settings">
                <div class="tab-icon"><i class="fas fa-cog"></i></div>
                <div class="tab-label">设置</div>
            </div>
        </div>
    </div>
</body>
</html>